<template>
    <div id="register">
      <div id="title">学生工作管理系统</div>
      <div id="title2">更改密码</div>
      <div id="form">
      <el-row>
        <el-col :span="2"><i class="el-icon-user-solid" style="width:40;height: 48;font-size: 40px;"></i></el-col>
        <el-col :span="22"> <el-input v-model="username" placeholder="学号/教师号" style="width: 326px;height:48px"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="2"><i class="el-icon-lock" style="width:40;height: 48;font-size: 40px;"></i></el-col>
        <el-col :span="22"> <el-input placeholder="密码" v-model="password" show-password style="width: 326px;height:48px"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="2"><i class="el-icon-lock" style="width:40;height: 48;font-size: 40px;"></i></el-col>
        <el-col :span="22"> <el-input placeholder="确认密码" v-model="password1" show-password style="width: 326px;height:48px"></el-input></el-col>
      </el-row>
      </div>
      <el-button type="primary" id="logo" @click="handle">保存</el-button>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
   export default {
      data() {
        return {
          username: '',
          password: '',
          password1:''
        }
      },
      methods: {
          handle(){
            if(this.username === ''){
            alert('用户名不能为空');
            return;
            }
          if(this.password!=this.password1){
            alert('密码不一致');
            return;
          }
          //向后段提交修改的账号密码
        //传出 username 用户名  password 密码
        //传入 success boolean类型，true表示更改密码成功
            axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/242716357?apifoxApiId=242716357',{//后端链接
                username:this.username,
                password:this.password
            }).then(res=>{
                if(res.data.success){//更改密码成功
                    alert('成功更改密码,请重新登录');
                    this.$router.push('/')
                }else{
                    alert('失败');
                }
            })
          }
      }
    }
  
  </script>
  <style>
  #register{
    width: 457px;
      height: 563px;
      background-color: rgb(215,215,215);
      border: 1px solid;
      padding: 40px;
      margin: 0 auto;
      position:absolute;
      top: 88px;
      left:500px;
    }
    #title{
      font-size: 30px;
      font-weight: 500;
    }
    #title2{
      font-size: 20px;
      text-align:left;
      position:absolute;
      top:200px;
      left:90px;
    }
    #logo{
      position:absolute;
      top:450px;
      left:300px;
      width:140px;
      height: 40px;
    }
    #form{
      position:absolute;
      top:250px;
      left:90px;
    }
    
  </style>